<template>
    <el-row class="contain-box">
        <site-nav/>
        <div class="view-body">
            <el-row>
                <el-form class="inline-form" inline>
                    <el-form-item>
                        <el-button @click="$router.go(-1)"><i class="el-icon-arrow-left el-icon--left"/>返回
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <el-col>
                    <el-table :data="list" border size="small">
                        <el-table-column align="center" label="登录时间">
                            <template slot-scope="scope">{{scope.row.loginTime | datetimeFormat}}</template>
                        </el-table-column>
                        <el-table-column align="center" label="登录IP" prop="loginIp"/>
                        <el-table-column align="center" label="登录身份" prop="loginIdentity"/>
                        <el-table-column align="center" label="登录方式" prop="loginType"/>
                        <el-table-column align="center" label="登录成功" width="80">
                            <template slot-scope="scope">
                                <commons-enable :value="scope.row.success"/>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="失败原因" prop="reason"/>
                    </el-table>
                </el-col>
            </el-row>
            <el-row>
                <el-col class="pagination">
                    <el-pagination :current-page="params.pageId" :page-size="params.pageSize" :total="count"
                                   @current-change="currentChange" background layout="total, prev, pager, next"/>
                </el-col>
            </el-row>
        </div>
    </el-row>
</template>
<script lang="ts">
  import {PARAMS} from '@/api/http';
  import ControlPanelApi from '@/api/user/controlPanelApi';
  import LoginLog from '@/structure/loginLog';
  import {Component, Vue} from 'vue-property-decorator';

  @Component
  export default class Page extends Vue {
    public list: LoginLog[] = [];
    public count: number | null = null;
    public params: PARAMS = {
      pageId: 1
    };

    public created(): void {
      this.getDataList();
    }

    public getDataList(): void {
      ControlPanelApi.loginLogs(this.params).then((res) => {
        this.list = res.list;
        this.count = res.count;
      });
    }

    public currentChange(val: number): void {
      this.params.pageId = val;
      this.getDataList();
    }
  }
</script>

